<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>H02 | 零基础HTML及CSS编码（一）</title>
        <link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <header role="banner">
        <h1><a href="#"><img src="image/task_1_02_1.png" /></a></h1>
        <nav role="navigation">
            <ul>
                <li><a href="#" target="_blank">链接一</a></li>
                <li><a href="#" target="_blank">链接二</a></li>
                <li><a href="#" target="_blank">链接三</a></li>
                <li><a href="#" target="_blank">链接四</a></li>
            </ul>
        </nav>
    </header>
    
    <main role="main">
        <article>
            <h2>文章一级标题</h2>
            <h3>文章二级标题</h3>
            <span class="auther">文章作者 </span><span class="aTime">文章发表时间</span>
            <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，<a href="#" target="_blank">新标签页打开网页</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
            <img src="image/task_1_01.jpg" alt="面向大海" />
            <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，<a href="#" target="_blank">新标签页打开网页</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
        </article>
        <article>
            <h2>另一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <span class="auther">文章作者 </span><span class="aTime">文章发表时间</span>
            <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，<a href="#" target="_blank">新标签页打开网页</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
            <img src="image/task_1_01.jpg" alt="面向大海" />
            <ul>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ul>
        </article>
        <article>
            <h2>图片</h2>
            <dl>
                <dt></dt>
                <dd><span>拥抱大海</span><img src="image/task_1_01.jpg" alt="面向大海" /></dd>
                <dd><span>拥抱大海</span><img src="image/task_1_01.jpg" alt="面向大海" /></dd>
                <dd><span>拥抱大海</span><img src="image/task_1_01.jpg" alt="面向大海" /></dd>
                <dd><span>拥抱大海</span><img src="image/task_1_01.jpg" alt="面向大海" /></dd>
            </dl>
        </article>
        <article>
            <h2>最后一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <span class="auther">文章作者 </span><span class="aTime">文章发表时间</span>
            <ol>
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol>
            <p>下面是一个表格</p>
            <table border="1">
                <tr><th>表头</th><th>表头</th><th>表头</th></tr>
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                <tr class="buttomTable"><td>总计</td><td colspan="2">1000</td></tr>
            </table>
        </article>
    </main>


    <aside>
        <h4>这里是一个侧栏，这是侧栏的标题</h4>
        <!--<h3>侧栏注册窗口标题</h3>-->
        
        <form action="save.php" method="post">
            <div>
                <label class="tips">请输入邮箱地址</label>

                <input type="text" placeholder="邮箱" />
                <p>邮箱地址请按要求格式输入</p>
            </div>
            
            <div>
                <label class="tips">请输入密码</label>
                <input type="password" placeholder="密码" />
            </div>
            
            <div>
                <label class="tips">请重复输入密码</label>
                <input type="password" placeholder="请重复输入密码" />
                <p>密码请为6-16位英文数字</p>
            </div>
        </form>
        

            <form action="save.php" method="post">
                <!--同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。-->
                <div>
                    <label class="tips">性别</label>
                    <!--value提交数据到服务器的值；checked默认被选中-->

                    <input type="radio" value="male" name="sex" checked="checked" />
                    <label>男</label>
                    <input type="radio" value="female" name="sex" />
                    <label>女</label>
                </div>
                
            </form>
            <form action="save.php" method="post">
                <div>
                    <label class="tips">城市</label>
                    <select>
                        <option value="北京">北京</option>
                        <option value="上海" selected="selected">上海</option>
                        <option value="广州">广州</option>
                    </select>
                </div>
            </form>
            <form action="save.php" method="post">
                <div>
                    <label class="tips">爱好</label>
                    <input type="checkbox" value="sport" name="hobby" />
                    <label>运动</label>
                    <input type="checkbox" value="art" name="hobby" />
                    <label>艺术</label>
                    <input type="checkbox" value="science" name="hobby" />
                    <label>科学</label>
                </div>
            </form>
            <form action="save.php" method="post">
                <div>
                    <label class="tips">个人描述</label>

                    <textarea rows="2" cols="20" >这是一个多行输入框( •̀ .̫ •́ )✧</textarea>
                </div>
            </form>
        <input type="button" class="submitButton" value="确认提交" />
</aside>

    <footer>
        <p>版权所有ⓒhollowtree</p>
    </footer>
</body>
</html>